<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>chat</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script type="text/javascript" src="js/hprose-html5.js"></script>
</head>
<body>
    <div class="container">
        <div class="row clearfix">
            <div class="column">
               <div class="thumbnail">
                   <div class="caption" id="dialog"></div>
               </div>
               <form onsubmit="onSubmit(); return false;">
                    <select style="margin-bottom:8px" id="userlist">
                        <option value="" selected>All</option>
                    </select>
                    <textarea class="textarea thumbnail" id="textarea"></textarea>
                    <div class="say-btn"><input type="submit" class="btn btn-default" value="send" /></div>
               </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function inputName() {
            var name = prompt('input your name：', '');
            if (!name || name == 'null') {
                alert("The name is empty or 'null'，please input again.");
                return inputName();
            }
            return name;
        }
        var client = hprose.Client.create('ws://127.0.0.1:8080/', ['getAllUsers', 'sendMessage', 'broadcast']);
        client.sendMessage.oneway = true;
        client.broadcast.oneway = true;
        var me = inputName();

        client.subscribe('message', me, function(message) {
            message = message.replace(/\n/g, '\n<br />');
            var dialog = document.getElementById('dialog');
            dialog.innerHTML = dialog.innerHTML + '<div class="speech_item"><p class="triangle-isosceles top">' + message + '</p></div>';
        });

        var updateUserList = function(users) {
            var userlist = document.getElementById('userlist');
            var to = userlist.options[userlist.selectedIndex].value;
            var i;
            var options = '<option value="">All</option>';
            for (i in users) {
                if (users[i] != me) {
                    options += '<option value="' + users[i] + '" ' + (to == users[i] ? 'selected' : '') + '>' + users[i] + '</option>';
                }
            }
            userlist.innerHTML = options;
        };

        client.subscribe('updateUsers', me, updateUserList);

        client.getAllUsers(updateUserList);

        function onSubmit() {
          var input = document.getElementById('textarea');
          var userlist = document.getElementById('userlist');
          var to = userlist.options[userlist.selectedIndex].value;
          if (to) {
                client.sendMessage(me, to, input.value);
          }
          else {
              client.broadcast(me, input.value);
          }
          input.value = "";
          input.focus();
        }
    </script>
</body>
</html>
